import React from 'react'
import SimpleFlow from 'components/simple-flow'
import FastFlow from 'components/simple-flow/fast-flow'
import { nodeTypes } from "components/simple-flow/node-list";
import { allNodeList } from "components/simple-flow/node-list";
export default {
  key: 'simple-flow',
  name: 'SimpleFlow 简易流程图',
  author: '张然',
  description: '简易流程图，添加节点并连线。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'valueKey', description: '节点的唯一key。', type: 'string', defaultValue: 'id'
      }, {
        param: 'nodes', description: '节点数组，需包括::nodeList::中的::type::和::valueKey::。', type: 'array', defaultValue: '-'
      }, {
        param: 'routes', description: '节点的路由，每一项为::{from, to}::。', type: 'array', defaultValue: '-'
      }, {
        param: 'onChange', description: '进行增加、删除节点后的返回值，返回::nodes::、::routes::。', type: 'function(nodes, routes)', defaultValue: '-'
      }, {
        param: 'onSelectNode', description: '点击某个可选择的节点时的回调。', type: 'function(node)', defaultValue: '-'
      }, {
        param: 'selectedNode', description: '现在选择中的节点。', type: 'string', defaultValue: 'null'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '放入到一个容器中即可使用。',
      state: {
        nodes: [
          {type: nodeTypes.START, id: 'start', title: '开始'},
          {type: nodeTypes.END, id: 'end', title: '结束'}
        ],
        routes: [
          {from: 'start', to: 'end'}
        ],
        selectedNode: null
      },
      getMethod: context => {
        return {
          handleChange: (nodes, routes) => {
            context.setState({ nodes, routes });
          },
          handleSelectNode: node => {
            context.setState({ selectedNode: node })
          }
        }
      },
      getContent: context => {
        const { nodes, routes, selectedNode } = context.state;
        const flowData = { nodes, routes };
        return (
          <div style={{ height: 768, width: '100%', overflow: 'scroll' }}>
            <SimpleFlow
              valueKey="id"
              {...flowData}
              isChange
              nodeList={allNodeList}
              selectedNode={selectedNode}
              onSelectNode={context.handleSelectNode}
              onChange={context.handleChange}
            />
          </div>
        )
      }
    },
    {
      title: '效率更高的图表',
      description: '跟以上数据结构不同，这次存储了每一项的宽度。',
      state: {
        nodes: [
          { id: 'start', type: 'start' },
          { id: 'end', type: 'end' }
        ],
        routes: [
          { from: 'start', to: 'end' }
        ],
        nodesTree: {
          span: 1,
          leaves: [{
            span: 1,
            children: [{
              id: 'start',
              type: 'start'
            }, {
              id: 'end',
              type: 'end'
            }]
          }]
        }
        // nodesTree: {
        //   span: 3,
        //   leaves: [{
        //     span: 3,
        //     children: [{
        //       id: 1,
        //       type: 'open'
        //     }, {
        //       span: 3,
        //       leaves: [{
        //         span: 1,
        //         children: [{
        //           id: 2
        //         }]
        //       }, {
        //         span: 2,
        //         children: [{
        //           id: 3,
        //           type: 'open'
        //         }, {
        //           span: 2,
        //           leaves: [{
        //             span: 1,
        //             children: [{
        //               id: 4
        //             }]
        //           }, {
        //             span: 1,
        //             children: [{
        //               id: 5
        //             }]
        //           }]
        //         }, {
        //           id: 6,
        //           type: 'close'
        //         }]
        //       }]
        //     }, {
        //       id: 7,
        //       type: 'close'
        //     }]
        //   }]
        // }
      },
      getMethod: context => {
        return {
          handleChange: nodesTree => {
            context.setState({ nodesTree });
          }
        }
      },
      getContent: context => {
        const { nodesTree } = context.state;
        return (
          <div style={{ height: 768, width: '100%', overflow: 'scroll' }}>
            <FastFlow
              nodesTree={nodesTree}
              onChange={context.handleChange}
            />
          </div>
        )
      }
    }
  ]
}
